<template>
  <view>
	  <tabsTop tabName="采购详情"></tabsTop>
    <sk-container v-if="FormData.Data.Total_Quantity == undefined">
      <view class="guj" style="height: calc(100vh)">
        <sk-waterfall waterfall length:10></sk-waterfall>
      </view>
    </sk-container>
    <view class="content" v-else>
      <view class="container">
        <view style="height: 40rpx"
          >{{
            FormData.Data.Article_Name == "" ? " " : FormData.Data.Article_Name
          }}
        </view>
        <view
          >采购数量：{{
            FormData.Data.Total_Quantity == undefined
              ? ""
              : FormData.Data.Total_Quantity
          }}{{ FormData.Data.Unit }}</view
        >
        <view
          >发布采购时间：{{
            FormData.Data.Delivery_Time == undefined
              ? ""
              : FormData.Data.Delivery_Time
          }}</view
        >
        <view>收获地：/{{ FormData.Data.Transaction_Location }}</view>
        <view>补充说明：集装箱装运木耳。。。</view>
        <!-- <view>浏览次数：{{ FormData.Browsing }}次</view> -->
      </view>
      <!-- 采购商信息 -->
      <view class="containerI">
        <view class="title">采购商信息</view>
        <view class="cont">
          <view class="left">
            <image
              style="width: 100%; height: 100%"
              :src="Domain_dead + '/tourist.png'"
              mode="scaleToFill"
            />
          </view>
          <view class="right">
            <view>{{ FormData.Data.Enterprise_Name }} </view>
            <view>{{ FormData.Data.Contacts }} </view>
            <view>联系电话：{{ FormData.Data.Contacts_Phone }} </view>
            <view>采购时间：{{ FormData.Data.Delivery_Time }} </view>
          </view>
        </view>
      </view>
      <!-- 报价 -->
      <view class="containerI">
        <view class="title">同行报价</view>
        <view class="Th">
          <view
            v-if="tableData2.length == 0"
            style="height: 200rpx"
            class="flex align-center justify-center font"
          >
            暂无相关交易同行报价
          </view>
          <view class="title" v-if="tableData2.length != 0">
            <view class="t1">供应商</view>
            <view class="t2">同行报价</view>
            <view class="t3">报价时间</view>
          </view>
          <view>
            <view class="title2" v-for="(item, i) in tableData2" :key="i">
              <view class="t1">{{ item.Seller_Contact }}</view>
              <view class="t2"
                ><text class="text-danger">{{ item.Amount }}</text
                >元/{{ item.Unit }}</view
              >
              <view class="t3">{{ item.Submission_Time }}</view>
            </view>
          </view>
        </view>
      </view>
      <!-- 行情 -->
      <view class="containerI">
        <view class="title">木耳行情</view>
        <view class="hq">
          <view class="flex flex-column" style="height: 45%">
            <view
              class="flex-shrink px-2 bg-lightbrown flex align-center"
              style="height: 80rpx"
            >
              <text class="font font-weight-bold">当日价格</text>
            </view>
            <view class="mx-2" style="height: 100%">
              <view class="flex align-center mt-1" style="height: 50%">
                <text class="font"
                  >当日均价（元/斤）：{{
                    Market_Data.Daily_average_price
                  }}</text
                >
              </view>
              <view class="flex align-center mt-1" style="height: 50%">
                <text class="font"
                  >相对比前日：下跌{{ Market_Data.fall }}元，跌幅{{
                    Market_Data.Decline == null ? 0 : Market_Data.Decline
                  }}%</text
                >
              </view>
            </view>
          </view>
          <view class="flex flex-column" style="height: 55%">
            <view
              class="flex-shrink px-2 bg-lightbrown flex align-center"
              style="height: 80rpx"
            >
              <text class="font font-weight-bold">近7日价格</text>
            </view>
            <view class="flex flex-column mx-2" style="height: 100%">
              <view class="flex align-center mt-1" style="height: 50%">
                <text class="font"
                  >近7日最高价（元/斤）：{{ Market_Data.max_price }}</text
                >
              </view>
              <view class="flex align-center mt-1" style="height: 50%">
                <text class="font"
                  >近7日最低价（元/斤）：{{ Market_Data.min_price }}</text
                >
              </view>
              <view class="flex align-center mt-1" style="height: 50%">
                <text class="font"
                  >近7日均价（元/斤）：{{ Market_Data.avg_price }}</text
                >
              </view>
            </view>
          </view>
        </view>
        <view class="mt-3">
          <qiun-data-charts
            type="area"
            :opts="opts"
            :chartData="chartData"
            style="height: 600rpx"
          />
        </view>
      </view>
      <!-- 热门 -->
      <view class="containerI btn">
        <view class="title">热门采购</view>
        <view class="Th">
          <view class="title">
            <view class="t1">采购品种</view>
            <view class="t2">采购数量</view>
            <view class="t3">发布人</view>
          </view>
          <view class="title2" v-for="(item, i) in tableData1" :key="i">
            <view class="t1">{{ item.Article_Name }}</view>
            <view class="t2">{{ item.Total_Quantity }}{{ item.Unit }}</view>
            <view class="t3">{{ item.Contacts }}</view>
          </view>
        </view>
      </view>

      <view
        class="button"
        v-if="
          FormData.Data.Enterprise_Info_SerialNumber !=
          Enterprise_Info_SerialNumber
        "
      >
        <button
          class="cal"
          @click="
            handleTabs(
              '/pages/My/Customer_service/Customer_service?name=' +
                FormData.Data.Enterprise_Name +
                '&Enterprise_Info_SerialNumber=' +
                FormData.Data.Enterprise_Info_SerialNumber
            )
          "
        >
          联系买家
        </button>
        <button
          @click="
            handleTabs(
              '/pages/SupplyAndMarketing/Trade/TradeDetail?Group_Seek_Purchase_SerialNumber=' +
                Group_Seek_Purchase_SerialNumber
            )
          "
        >
          提交申请
        </button>
      </view>
      <view v-else class="button">
        <button>本企发布</button>
      </view>
    </view>
	<tabsBottom></tabsBottom>
  </view>
</template>

<script>
const app = getApp();
import {
  GroupServesHistory,
  getGroupSeekProcureID,
  GroupSeekProcureAll,
  GroupSeekProcureAllAction,
} from "@/api/group.js";
import {
  GoodsFileAdd,
  getAddAction,
  GroupMarketQuotations,
} from "@/api/global.js";
import { getGroupSeekTransactionAll } from "@/api/purchasedgoods.js";
import times from "@/static/js/utils.js";
import { accSub } from "@/static/js/GeneralUtil.js"; //图表
	import tabsTop from "@/components/tabs/tabs-top.vue";
	import tabsBottom from "@/components/tabs/tabs-bottom.vue";
export default {
  name: "Tradedetails",
  components: {
  	tabsTop,
  	tabsBottom,
  },
  data() {
    return {
      screenWidth: uni.getSystemInfoSync().windowWidth,
	  Domain_IMG: app.globalData.Domain_IMG,
	  Domain_dead: app.globalData.Domain_dead,
      Domain_Business: app.globalData.Domain_Business,
      ThemeColors: app.globalData.ThemeColors,
      FormData: {
        Data: {},
      },
      Group_Seek_Purchase_SerialNumber: 0,
      Enterprise_Info_SerialNumber: "",
      chartData: {},
      tableData1: [],
      opts: {
        //echars
        color: [
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        padding: undefined,
        enableScroll: false,
        extra: {
          word: {
            type: "normal",
            autoColors: false,
          },
        },
      },
      form: {
        Article_Name: "",
        Category_SerialNumber: "",
        Enterprise_Info_SerialNumber: "",
        Type: "0",
        token: "",
        page: 1, //页数
        limit: 5, //每页数据条数
      },
      tableData2: [], //同行报价
      form2: {
        Type: "1",
        Article_Name: "",
        Row_Status: "",
        Group_Seek_Purchase_SerialNumber: "",
        Enterprise_Info_SerialNumber: "",
        page: 1, //页数
        limit: 5, //每页数据条数
      },
      BrowseHistory: {
        Group_Browse_SerialNumber: "",
        Group_SerialNumber: "",
        Group_Browse_Path: "",
        Group_Type: "0",
        Group_Browse_Date: times.nowtime(),
        User_Number: "",
      },
      Market_Data: {
        Daily_average_price: "", //当均价
        fall: "", //当下跌
        Decline: "", //当跌幅
        max_price: "", //7最高价
        min_price: "", //7最低价
        avg_price: "", //7均价
      },
    };
  },
  onLoad(e) {
    this.form2.Enterprise_Info_SerialNumber = e.Enterprise_Info_SerialNumber;

    this.Enterprise_Info_SerialNumber = uni.getStorageSync("enterprise");

    this.Group_Seek_Purchase_SerialNumber = e.Group_Seek_Purchase_SerialNumber;

    let data = {
      Group_Seek_Purchase_SerialNumber: e.Group_Seek_Purchase_SerialNumber,
    };

    this.form2.Group_Seek_Purchase_SerialNumber =
      e.Group_Seek_Purchase_SerialNumber;

    this.getGroupSeekProcureID(data);

    this.getData2(this.form2);

    this.getData(this.form);

    this.BrowseHistory.User_Number = uni.getStorageSync("use");

    this.BrowseHistory.Group_SerialNumber = e.Group_Seek_Purchase_SerialNumber;

    let pages = getCurrentPages();

    let currentPage = pages[pages.length - 1];

    this.BrowseHistory.Group_Browse_Path = currentPage.route;

    this.getAddHistory();
  },
  onReady() {
    this.getServerData();
  },
  methods: {
    async getAddHistory() {
      let data = {
        Data: JSON.stringify({
          group_browsing_info: [this.BrowseHistory],
        }),
      };
      const res = await getAddAction(data);
    },
    async getData(data) {
      //分页查询所有采购交易
      const res = await GroupSeekProcureAllAction(data);
      if (
        (res.redirect && res.redirect == "REDIRECT") ||
        res.REDIRECT == "REDIRECT"
      ) {
        uni.removeStorageSync("token");
        const res = await GroupSeekProcureAll(data);
        if (res.Status == "success") {
          this.tableData1 = res.tableData;
        }
      } else if (res.Status == "success") {
        this.tableData1 = res.tableData;
      }
    },
    //同行报价
    async getData2(data) {
      const res = await getGroupSeekTransactionAll(data);
      this.tableData2 = res.tableData;
    },

    async getGroupSeekProcureID(data) {
      const res = await getGroupSeekProcureID(data);
	  console.log(res,"木耳详情");
      if (
        (res.redirect && res.redirect == "REDIRECT") ||
        res.REDIRECT == "REDIRECT"
      ) {
        setTimeout(function () {
          uni.navigateTo({
            url: "/pages/login/login",
          });
        }, 2000);
      } else if (res.Status == "success") {
        this.FormData = res;
        this.getServerData(res.Data.Category_SerialNumber);
      }
    },

    async getServerData(Category_SerialNumber) {
		
      const res = await GroupMarketQuotations({Category_SerialNumber});
      let toDay = res.Data1.toDay == null ? 0 : res.Data1.toDay; //当日均价
      let yesterday = res.Data1.yesterday == null ? 0 : res.Data1.yesterday;
      let Market_Data = {
        Daily_average_price: toDay,
        fall: accSub(toDay, yesterday),
        Decline: (accSub(toDay, yesterday) / toDay) * 100,
        max_price: res.Data2.max, //最高价
        min_price: res.Data2.min,
        avg_price: res.Data2.avg,
      };
      this.Market_Data = Market_Data;
      let categories = [];
      for (let i = 1; i < 13; i++) {
        categories.push(i);
      }
      let res1 = {
        categories,
        series: res.Data,
      };
      this.chartData = JSON.parse(JSON.stringify(res1));
    },

    handleTabs(url) {
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>

<style lang="scss">
.content {
  padding: 30rpx;
  box-sizing: border-box;
  background-color: #f5f5f5;
  position: relative;

  .guj {
    width: 100%;
    display: block !important;
    height: calc(100vh);
  }

  .container {
    border-radius: 20rpx;
    background-color: #fff;
    padding: 20rpx;
    box-sizing: border-box;
    box-shadow: 0 -0.5px 0 0 #f5f5f5;
    border-radius: 5px;
    padding: 2rpx 32rpx 30rpx 24rpx;
    margin: 0 0px 20rpx;

    view:first-child {
      font-size: 32rpx;
      color: #333;
      font-weight: 500;
      margin-bottom: 30rpx;
    }

    view {
      font-size: 28rpx;
      color: #333;
      font-weight: 400;
      display: flex;
      align-items: center;
      margin-top: 18rpx;
    }
  }

  .containerI {
    border-radius: 20rpx;
    background-color: #fff;
    // padding: 20rpx;
    box-sizing: border-box;
    box-shadow: 0 -0.5px 0 0 #f5f5f5;
    border-radius: 5px;
    padding: 30rpx 32rpx 30rpx 32rpx;
    margin: 0 0px 20rpx;

    .title {
      font-size: 32rpx;
      color: #333;
      line-height: 32rpx;
      font-weight: 500;
      margin-bottom: 28rpx;
    }

    .cont {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .left {
      width: 136rpx;
      height: 136rpx;
    }

    .right {
      flex-direction: column;
      align-items: flex-start;
      font-size: 28rpx;
      width: 70%;

      view {
        display: flex;
        justify-content: flex-start;
      }

      view :first-child {
        font-size: 30rpx;
      }

      view {
        margin: 0 0 16rpx 0;
      }
    }

    .Th {
      .title {
        width: 100%;
        display: flex;
        color: #999;
        margin-top: 30rpx;

        .t1 {
          width: 30%;
        }

        .t2 {
          width: 30%;
        }

        .t3 {
          width: 40%;
        }
      }

      .title2 {
        width: 100%;
        display: flex;
        margin: 0 0 10rpx 0;
        font-size: 30rpx;

        .t1 {
          width: 30%;
          display: flex;
          align-items: center;
          margin: 0 0 10rpx 0;
        }

        .t2 {
          width: 30%;
          display: flex;
          align-items: center;
          margin: 0 0 10rpx 0;
        }

        .t3 {
          width: 40%;
          display: flex;
          align-items: center;
          margin: 0 0 10rpx 0;
        }
      }
    }

    .hq {
      background-color: #f2f6f7;
      padding: 20rpx;
      box-sizing: border-box;
    }
  }

  .btn {
    margin-bottom: 122rpx;
    // padding: 0 20rpx;
    // padding-left: 20rpx;
    box-sizing: border-box;
  }

  .button {
    padding: 20rpx 30rpx;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: -1px;
    left: 0;
    width: 100%;
    box-sizing: border-box;

    button {
      font-size: 32rpx;
      text-align: center;
      line-height: 32rpx;
      display: block;
      padding: 24rpx 0;
      background: #28a745;
      border-radius: 80rpx;
      color: #fff;
      width: 320rpx;
    }

    .cal {
      background-color: #f39147;
    }
  }
}
</style>